<template>
    <div class="app-container">
        <!-- 查询条件 -->
        <el-card v-if="state.showSearch">
            <el-form ref="queryRef" :inline="true" :model="state.queryParams" label-width="68px">

                <el-form-item label="id" prop="id">
                    <el-input v-model="state.queryParams.id" placeholder="请输入id" clearable style="width: 240px" />
                </el-form-item>

                <el-form-item label="学科名" prop="name">
                    <el-input v-model="state.queryParams.name" placeholder="请输入广告名" clearable style="width: 240px" />
                </el-form-item>

                <el-form-item label="状态" prop="status">
                    <el-select v-model="state.queryParams.status" placeholder="状态" clearable>
                        <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="创建时间" style="width: 308px">
                    <el-date-picker v-model="state.dateRange" value-format="YYYY-MM-DD" type="datetimerange"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="Search" @click="getDataList">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery(proxy)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 制作表格 -->
        <el-card style="margin-top: 20px;">
            <el-row :gutter="10" class="mb20">
                <el-col :span="1.5">
                    <el-button v-hasPermi="['app:subject:add']" type="primary" plain icon="Plus"
                        @click="addOrUpdateHandle()">新增</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button v-hasPermi="['app:subject:edit']" type="success" plain icon="Edit"
                        :disabled="state.single" @click="addOrUpdateHandle(state.ids[0])">修改</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button v-hasPermi="['app:subject:remove']" type="danger" plain icon="Delete"
                        :disabled="state.multiple" @click="deleteBatchHandle(state.ids)">删除</el-button>
                </el-col>
                <right-toolbar v-model:showSearch="state.showSearch" @queryTable="getDataList"></right-toolbar>
            </el-row>
            <el-table v-loading="state.dataListLoading" :data="state.rows" style="width: 100%"
                @selectionChange="selectionChangeHandle">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="id编号" align="center" prop="id" />
                <el-table-column label="学科名" align="center" prop="name" :show-overflow-tooltip="true" />
                <el-table-column label="学科说明" align="center" prop="remark" :show-overflow-tooltip="true" />
                <!--                 <el-table-column label="图片的imgUrl" align="center" prop="imageUrl" :show-overflow-tooltip="true" /> -->
                <el-table-column label="图片" align="center">
                    <template #default="scope">
                        <img v-bind:src="scope.row.imagePath">
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center" prop="status">
                    <template #default="scope">
                        <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true" />
                <el-table-column label="更新时间" align="center" prop="updateTime" :show-overflow-tooltip="true" />
                <el-table-column label="操作" align="left" width="150" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button v-hasPermi="['app:advs:edit']" link type="primary" icon="Edit"
                            @click="addOrUpdateHandle(scope.row.id)">修改</el-button>

                        <el-button v-hasPermi="['app:advs:remove']" link type="primary" icon="Delete"
                            @click="deleteHandle(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>

            <pagination v-show="state.total > 0" v-model:page="state.queryParams.pageNum"
                v-model:limit="state.queryParams.pageSize" :total="state.total" @pagination="getDataList" />
        </el-card>
        <!-- 引用新增或修改的界面 -->
        <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
    </div>
</template>

<script lang="ts" setup="subject">
import {IHooksOptions} from '@/hooks/hooksinterface';
import {useCrud} from '@/hooks/hooksservice';
import { ref, reactive,  getCurrentInstance, ComponentInternalInstance,nextTick} from 'vue';
import { subjectApi,deleteSubject } from '@/api/app/subject/subject';

//引用新增修改组件页
import AddOrUpdate from './add-and-edit.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_normal_disable } = proxy!.useDict('sys_normal_disable');

//定义接口，后台请求的API，以及查询条件的表单对象
const state: IHooksOptions = reactive({
	queryApi: subjectApi,
	deleteApi: deleteSubject,
    exportApi: undefined,
	//主键名称
	primaryKey:'id',
	queryForm:  {
		page:1,
		size:10,
        id:'',
		name:''
	},
    //日期查询
    dateRange:[]
})
//vue3中叫组合式函数
const { getDataList,  selectionChangeHandle,
        sortChangeHandle, resetQuery,deleteHandle, deleteBatchHandle }=useCrud(state)

// 调用新增或修改页面的方法
const addOrUpdateRef = ref()
//新增或修改的时候传递id
const addOrUpdateHandle = (id?: number) => {
    //调用它里面的init方法
	addOrUpdateRef.value.init(id)
}


</script>

<style>
</style>
